<template>
	<!-- 选择语言 -->
	<view class="language-container">
		<nav-bar :title="i18n.set.language" @_back="_back" />
		<view class="container">
			<view class="language-box dis-between" v-for="(item, index) in list" :key="index" @click="_click(item)">
				<text class="white-text">{{item.title}}</text>
				<u-icon v-show="current === index" name="checkbox-mark" color="#eec67f" size="30"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from '@/utils/minix.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				current: 0
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			list() {
				return [{
						title: this.$t('message').set.chinese,
						language: 'zh-CN',
						idx: 0
					},
					{
						title: this.$t('message').set.english,
						language: 'en-US',
						idx: 1
					},
					{
						title: this.$t('message').set.tradition,
						language: 'zh-HK',
						idx: 2
					},
				]
			}
		},
		mounted() {
			this.current = uni.getStorageSync('index') || 0
		},
		methods: {
			_click(items) {
				let _this = this;
				if (_this.current === items.idx) return;
				_this.current = items.idx;
				// 存储选择的语言
				uni.setStorageSync('index', items.idx);
				uni.setStorageSync('select', items.language);
				_this.$store.commit('set/SET_LANGUAGE', items.language)
				_this.$i18n.locale = items.language;
				setTimeout(() => {

					// tabbar多语言
					uni.setTabBarItem({
						index: 0,
						text: _this.i18n.tabBar.home,
					});
					uni.setTabBarItem({
						index: 1,
						text: _this.i18n.tabBar.period
					});
					uni.setTabBarItem({
						index: 2,
						text: _this.i18n.tabBar.point
					});
					uni.setTabBarItem({
						index: 3,
						text: _this.i18n.tabBar.balances
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.language-container {
		.container {
			margin-top: 60rpx;

			.language-box {
				height: 120rpx;
				align-items: center;
				border-bottom: 1px solid rgba(255, 255, 255, .1);
			}
		}
	}
</style>
